<template>
	<div>
		<cl-crud @load="onLoad">
			<!-- 筛选 -->
			<template #slot-filter>
				<div class="filter-box">
					<el-select
						size="mini"
						filterable
						v-model="select.filters"
						placeholder="回复状态"
						style="margin-right: 10px;width:125px;margin-left:10px"
						@change="val => crud.refresh({ status: val, page: 1 })"
					>
						<el-option label="全部" value=" "></el-option>
						<el-option label="已回复" :value="1"></el-option>
						<el-option label="未回复" :value="0"></el-option>
					</el-select>
				</div>
			</template>
			<template #table-column-imgs="{scope}">
				<div class="image-list">
					<img :src="item" v-for="item in scope.row.imgs" @click="showPreview(item)" alt/>
				</div>
			</template>
			<template #table-column-problemType="{scope}">
				{{ scope.row.categoryId }}
			</template>
			<!-- <template #table-column-content="{scope}" >
				<div class='row-content' >
					{{scope.row.content}}
				</div>
			</template> -->
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">已回复</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">未回复</span>
			</template>
			<template #table-column-replyMsg="{scope}">
				<!-- <div class="row-content" v-html="scope.row.replyMsg"></div> -->

				<div>
					<el-popover
						placement="top-start"
						title="回复内容"
						width="500"
						trigger="hover"
						:content="scope.row.replyMsg"
					>
						<div class="row-content" slot="reference">{{ scope.row.replyMsg }}</div>
					</el-popover>
				</div>
			</template>
			<template #table-column-content="{scope}">
				<div>
					<el-popover
						placement="top-start"
						title="反馈详情"
						width="500"
						trigger="hover"
						:content="scope.row.content"
					>
						<div class="row-content" slot="reference">{{ scope.row.content }}</div>
					</el-popover>
				</div>
			</template>
			<template #slot-delete="{scope}">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
			<template #slot-Reply="{scope}">
				<div class="reply" @click="reply(scope.row)">
					回复
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>

		<!--查看大图-->
		<el-dialog
			title="大图预览"
			:visible.sync="previewVisible"
			width="20%"
			class="preview-dialog"
		>
			<img class="img-preview" :src="previewImg" alt/>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			crud: null,
			options: [],
			select: {
				filter: '',
				filters: ''
			},
			previewVisible: false,
			previewImg: null
		};
	},
	methods: {
		reply(row) {
			console.log(row);
			this.$refs['cl-form'].open({
				props: {
					labelWidth: '100px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				op: {
					confirmButtonText: '回复'
				},
				items: [
					{
						prop: 'text',
						label: '反馈内容：',
						component: <div>{row.content}</div>
						// component: (
						// 	<div>
						// 		{[1, 2, 3].map(item => {
						// 			return (
						// 				<div class="problem-box">
						// 					<div class="problem">
						// 						问：
						// 						<span style="color:#000">{row.content + item}</span>
						// 					</div>
						// 					<div class="answer">
						// 						答：<span style="color:#000">{row.content}</span>
						// 					</div>
						// 				</div>
						// 			);
						// 		})}
						// 	</div>
						// )
					},
					{
						prop: 'relay',
						label: '编辑回复：',
						value: row.replyMsg,
						component: {
							name: 'textarea-input',
							data() {
								return {
									textarea: ''
								};
							},
							props: {
								value: [String]
							},
							methods: {
								Change(e) {
									this.$emit('input', e);
								}
							},
							mounted() {
								this.textarea = this.value;
							},
							render() {
								return (
									<el-input
										type="textarea"
										onChange={this.Change}
										rows={6}
										placeholder="请输入回复内容"
										v-model={this.textarea}></el-input>
								);
							}
						},
						rules: [
							{
								required: true,
								message: '请输入回复内容',
								trigger: 'blur'
							}
						]
					}
				],
				on: {
					submit: ({ data, close }) => {
						console.log(data);
						this.$service.FAQMenagement.faqUser
							.update({
								id: row.id,
								replyMsg: data.relay
							})
							.then(() => {
								this.$message({
									type: 'success',
									message: '回复成功'
								});
								this.crud.refresh();
								close();
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.FAQMenagement.faqUser)
				.set('dict', {
					label: {
						add: '添加用户问题',
						delete: '批量删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '#',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '用户ID',
							prop: 'userId',
							align: 'center'
						},
						{
							label: '反馈意见',
							prop: 'content',
							align: 'left',
							'min-width': 150
						},
						{
							label: '反馈图片',
							prop: 'imgs',
							align: 'center',
							'min-width': 180
						},
						{
							label: '回复内容',
							prop: 'replyMsg',
							align: 'center',
							emptyText: '未回复',
							'min-width': 150
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['slot-Reply']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px'
					},
					items: []
				})
				.on('refresh', async (params, { next, render }) => {
					if (params.status === ' ') {
						delete params.status;
					}
					let { list } = await next(params);

					list.map(e => {
						if (e.imgs) {
							e.imgs = e.imgs.split(',')
						}
					});
					render(list);
				})
				.set('layout', [
					['refresh-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		},
		showPreview(item) {
			this.previewVisible = true;
			this.previewImg = item
		}
	}
};
</script>

<style lang="scss">
.reply {
	color: $color-link;
	cursor: pointer;
	display: inline-block;
	:hover {
		opacity: 0.7;
	}
}
.problem-box {
	padding: 0 10px 10px 0;
	.problem {
		color: $color-warn;
	}
	.answer {
		color: $color-link;
	}
}
.row-content {
	height: 40px;
	@include ellipsis(2);
	text-align: left;
}
	.image-list {
		@include flexBox(center);
		img {
			width: 50px;
			height: 50px;
			margin: 10px 5px;
			border-radius: 8px;
			cursor: pointer;
		}
	}
	.preview-dialog {
		@include flexBox(center);
		.img-preview {
			width: 100%;
		}
	}
</style>
